* {
    padding: 0;
    margin: 0;
}

.job {
    width: 100%;

    .job-top {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .job-search {
        height: 50px;
        line-height: 50px;
        text-align: center;

        input {
            width: calc(100% - 40px);
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 0 5px;
        }
    }

    //热门公司
    .job-HotCompany {
        width: calc(100% - 40px);
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .job-HotCompany-top {
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;

            span {
                color: red;
            }
        }

        .job-HotCompany-bottom {
            height: 150px;
            display: flex;
            justify-content: space-between;

            .job-HotCompany-bottom-item {
                width: 140px;
                height: 130px;
                border: 1px solid #ccc;
                box-shadow: 0 0 5px #ccc;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .item-top {
                    height: 30px;
                    line-height: 30px;
                    display: flex;

                    img {
                        width: 30px;
                        height: 30px;
                    }

                    span {
                        font-size: 10px;
                    }
                }

                .item-body {
                    height: 60px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }

                .item-bottom {
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;

                    .item-bottom-left {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                        //隐藏多余
                        overflow: hidden;
                    }

                    .item-bottom-right {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }
                }
            }
        }
    }

    //为您推荐
    .job-Recommend {
        width: calc(100% - 40px);
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .job-Recommend-top {
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;

            span {
                color: red;
            }
        }

        .job-Recommend-bottom {
            height: 150px;
            display: flex;
            justify-content: space-between;

            .job-Recommend-bottom-item {
                width: 140px;
                height: 130px;
                border: 1px solid #ccc;
                box-shadow: 0 0 5px #ccc;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .item-top {
                    height: 30px;
                    line-height: 30px;
                    display: flex;

                    img {
                        width: 30px;
                        height: 30px;
                    }

                    span {
                        font-size: 10px;
                    }
                }

                .item-body {
                    height: 60px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }

                .item-bottom {
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;

                    .item-bottom-left {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                        overflow: hidden;
                    }

                    .item-bottom-right {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }
                }
            }
        }
    }

    //空缺职位
    .job-Vacancy {
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-top: 20px;
        height: 300px;

        .job-Vacancy-top {
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;

            span {
                color: red;
            }
        }

        .job-Vacancy-bottom {
            margin-top: 10px;

            .item {
                border: 1px solid #ccc;
                height: 170px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 5px;

                .item-top {
                    height: 40px;
                    line-height: 40px;
                    display: flex;

                    .item-top-left {
                        width: 160px;
                        display: flex;
                        justify-content: space-between;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        span {
                            font-size: 14px;
                        }
                    }
                }

                .item-body {
                    height: 90px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    p {
                        font-size: 12px;
                        // 超出部分隐藏
                        overflow: hidden;
                        // 超出部分显示省略号
                        text-overflow: ellipsis;
                        // 超出部分隐藏，并用...代替
                        white-space: nowrap;
                        width: 25%;
                    }

                    span {
                        font-size: 12px;
                    }
                }

                .item-bottom {
                    width: 120px;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;

                    .item-bottom-left {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }

                    .item-bottom-right {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }
                }
            }
        }
    }

}


// 招聘详情
.detail {
    width: 100%;

    .detail-top {
        height: 50px;
        line-height: 50px;

        .detail-top-icon {
            font-size: 18px;
            font-weight: 700;
            margin-left: 20px;
        }
    }

    .detail-content {
        text-align: center;

        .detail-content-item {
            .item-box {
                height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;

                .item-img {
                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;

                    }
                }

                p {
                    font-size: 18px;
                    font-weight: 700;
                }

                .item-address {
                    width: 300px;
                    margin: 0 auto;
                    font-size: 16px;
                    font-weight: 700;
                }
            }

            .item-box-introduce {
                margin-top: 10px;

                span {
                    font-size: 16px;
                    font-weight: 700;
                }

                p {
                    line-height: 40px;
                    border: 2px solid #ccc;
                    margin: 10px 0;
                    font-size: 16px;
                    font-weight: 700;
                    text-align: left;
                    text-indent: 2em;
                }
            }

            .item-box-xiang {
                margin-top: 10px;

                span {
                    font-size: 16px;
                    font-weight: 700;
                }

                .xiang-box {
                    border: 2px solid #ccc;
                    margin: 10px 0;

                    div {
                        display: flex;
                        height: 50px;
                        line-height: 50px;
                        margin-top: 2px;
                        border: 1px solid #ddd;

                        p {
                            width: 30%;
                            border: 1px solid #ddd;
                        }

                        span {
                            width: 65%;
                            border: 1px solid #ddd;
                            font-size: 14px;
                            text-align: left;
                            padding-left: 10px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }

    .detail-bottom {
        width: 100%;
        height: 250px;


        .detail-bottom-head {
            height: 30px;
            line-height: 30px;
            text-align: center;

            span {
                font-size: 16px;
                font-weight: 700;
            }
        }

        .detail-bottom-box {
            margin-top: 10px;

            .item {
                border: 1px solid #ccc;
                height: 150px;
                width: 90%;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 5px;

                .item-top {
                    height: 40px;
                    line-height: 40px;
                    display: flex;

                    .item-top-left {
                        width: 180px;
                        display: flex;
                        justify-content: space-between;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        span {
                            font-size: 13px;
                        }
                    }
                }

                .item-body {
                    height: 90px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    span {
                        font-size: 12px;
                    }
                }

                .item-bottom {
                    width: 120px;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;

                    .item-bottom-left {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }

                    .item-bottom-right {
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        display: flex;
                    }
                }
            }
        }

    }
}

//搜索
.search {
    width: 100%;

    .search-top {
        height: 80px;
        line-height: 80px;
    }

    .search-body {
        height: 50px;

        .search-bar {
            width: 90%;
            margin: 0 auto;
            --height: 40px;
        }
    }

    .search-content {
        margin-top: 10px;

        .search-content-top {
            width: 90%;
            margin: 0 auto;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 700;
        }
    }

    .search-history {
        height: 80px;
        display: flex;
        flex-wrap: wrap;

        .item {
            margin-left: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;

            span {
                font-size: 14px;
                font-weight: 700;
            }
        }
    }

    .tuijian {
        width: 90%;
        margin: 0 auto;

        .tuijian-top {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            font-weight: 700;
        }

        .tuijian-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item {
                width: 40%;
                height: 40px;

                span {
                    font-size: 14px;
                    font-weight: 700;
                }
            }
        }
    }

    .search-bottom {
        position: fixed;
        bottom: 10px;
        width: 100%;

        .search-btn {
            width: 90%;
            margin: 0 auto;
        }
    }
}

//搜索结果
.outcome {
    width: 100%;

    .outcome-top {
        height: 80px;
        line-height: 80px;
    }

    .outcome-content {
        margin: 0 20px;
        font-size: 14px;
        font-weight: 700;
    }

    .outcome-bottom {
        height: 100px;

        .item {
            height: 200px;
            border: 1px solid #ccc;
            margin: 20px;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .item-top {
                height: 40px;
                line-height: 40px;
                display: flex;

                .item-top-left {
                    width: 200px;
                    display: flex;
                    justify-content: space-between;

                    img {
                        width: 40px;
                        height: 40px;
                    }

                    span {
                        width: 150px;
                        font-size: 14px;
                    }
                }
            }

            .item-body {
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                span {
                    font-size: 12px;
                }
            }

            .item-bottom {
                width: 120px;
                height: 30px;
                line-height: 30px;
                display: flex;
                justify-content: space-between;

                .item-bottom-left {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                }

                .item-bottom-right {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                }
            }
        }
    }
}

//职位详情
.position {
    width: 100%;

    .position-top {
        height: 50px;
        line-height: 50px;

        .position-top-icon {
            font-size: 18px;
            font-weight: 700;
            margin-left: 20px;
        }
    }

    .position-content {
        text-align: center;

        .position-content-item {
            .item-box {
                height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .item-img {
                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;

                    }
                }

                p {
                    font-size: 18px;
                    font-weight: 700;
                }

                .item-address {
                    width: 250px;
                    margin: 0 auto;

                    .item-address-right {
                        display: flex;
                        justify-content: space-between;

                        .right-icon {
                            font-size: 20px;
                            font-weight: 700;
                        }

                        span {
                            font-size: 14px;
                            font-weight: 700;
                        }
                    }
                }
            }


            .position-box {
                height: 600px;

                .box {
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    font-weight: 700;
                }

                .box1 {
                    line-height: 25px;
                    border: 1px solid #ccc;
                    text-align: left;
                    padding: 5px 10px;
                    //底部阴影
                    box-shadow: 0px 3px 10px #ccc;

                    span {
                        font-size: 12px;
                        font-weight: 700;
                    }
                }

                .box2 {
                    line-height: 25px;
                    border: 1px solid #ccc;
                    text-align: left;
                    padding: 5px 10px;
                    //底部阴影
                    box-shadow: 0px 3px 10px #ccc;
                    margin-top: 10px;

                    span {
                        font-size: 12px;
                        font-weight: 700;
                    }
                }

                .box3 {
                    line-height: 25px;
                    border: 1px solid #ccc;
                    text-align: left;
                    padding: 5px 10px;
                    //底部阴影
                    box-shadow: 0px 3px 10px #ccc;
                    margin-top: 10px;

                    span {
                        font-size: 12px;
                        font-weight: 700;
                    }
                }
            }
        }
    }
}

//更多
.more {
    width: 100%;

    .more-top {
        height: 50px;
        line-height: 50px;
    }

    .more-body {
        width: calc(100% - 30px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .more-item {
            width: 140px;
            height: 130px;
            border: 1px solid #ccc;
            box-shadow: 0 5px 5px #ccc;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .item-top {
                height: 30px;
                line-height: 30px;
                display: flex;

                img {
                    width: 30px;
                    height: 30px;
                }

                span {
                    font-size: 10px;
                }
            }

            .item-body {
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }

            .item-bottom {
                height: 30px;
                line-height: 30px;
                display: flex;
                justify-content: space-between;

                .item-bottom-left {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                    //隐藏多余
                    overflow: hidden;
                }

                .item-bottom-right {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                }
            }
        }

    }
}